<?php
use app\assets\AuctionListAsset;
use yii\helpers\Html;

AuctionListAsset::register($this);
?>

<div id="categoryToolbar">
    <button id="remove" class="btn btn-danger" disabled>
        <i class="glyphicon glyphicon-remove"></i> 批量删除
    </button>
    <button id="addCategoryBtn" class="btn btn-primary" style="margin-left: 10px;">
        <i class="glyphicon glyphicon-plus"></i> 添加
    </button>
</div>

<table id="table">
</table>

<!-- 添加的分类Modal 提示框-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >添加分类信息</h4>
            </div>
            <div id="addForm">
                <div class="modal-body">
                    <div class="form-group">
                        <div>
                            <select name="" id="modalChooseCategorySelect" class="form-control" >
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="category_name_input" class="control-label">分类名称:</label>
                        <input type="text" class="form-control" id="category_name_input" name="category_name_input" check-type="required" >
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary"  id="addBtn">确定添加</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    //初始化表格设置
    $('#table').bootstrapTable({
        height: 712,//高度
        toolbar: '#categoryToolbar',        //工具按钮用哪个容器
        clickToSelect: false,//点击行即可选中单选/复选框
        singleSelect: false,//复选框只能选择一条记录
        search: true,//是否显示右上角的搜索框
        striped: true,      //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,     //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "asc",          //排序方式
        sidePagination: "server", //服务端处理分页
        method: 'get',      //请求方式（*）
        pageNumber:1,      //初始化加载第一页，默认第一页
        pageSize: 15,      //每页的记录行数（*）
        pageList: [15, 30, 50, 100],  //可供选择的每页的行数（*）
        cardView: false,          //是否显示详细视图
        uniqueId:'category_id',
        url:"category-table-data",

        columns: [{
            field: 'state',
            checkbox: true,
            align: 'center',
            width:'5%',
            valign: 'middle'
        },{
            field: 'p_category_name',
            align: 'center',
            title: '一级分类',
            width:'25%',
            valign: 'middle'
        }, {
            field: 'category_name',
            align: 'center',
            valign: 'middle',
            width:'25%',
            title: '二级分类'
        },{
            field: 'create_time',
            align: 'center',
            valign: 'middle',
            width:'20%',
            title: '添加时间'
        },{
            field: 'operate',
            align: 'center',
            valign: 'middle',
            width:'15%',
            title: '操作',
            formatter:function(value,row,index){
                var b = '<a href="#" mce_href="#" onclick="onRemoveClick(\''+ row.category_id + '\',\'' +index+ '\')">删除</a> ';
                return b;
            }
        }]
    });


    //复选框点击事件
    $('#table').on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $('#remove').prop('disabled', !$('#table').bootstrapTable('getSelections').length);
        selections = getIdSelections();

    });

    //获取选择的合集
    function getIdSelections() {
        return $.map($('#table').bootstrapTable('getSelections'), function (row) {
            return row.category_id;
        });
    }

    //批量删除操作
    $('#remove').click(function () {
        var ids = getIdSelections();
        console.log('ids:'+ids);

        $.ajax({
            url: "remove-category",
            data:{"category_id":ids},
            dataType: "json",
            success: function (data) {

                $('#table').bootstrapTable('remove', {
                    field: 'category_id',
                    values: ids
                });
                $('#remove').prop('disabled', true);
                alert('批量删除成功');
            }
        });

    });

    //点击删除按钮
    function onRemoveClick(category_id){

        console.log(category_id);
        //
        $.ajax({
            url: "remove-category",
            data:{"category_id":category_id},
            dataType: "json",
            success: function (data) {

                $('#table').bootstrapTable('removeByUniqueId', category_id);
                alert('删除成功');
            }
        });

    }


    //正则的样式
    $(function() {
        //1. 正则逻辑样式
        $("#addForm").validation({icon: true, reqmark: false});

        //加载一级二级目录
        $.ajax({
            url:'first-category-list',
            dataType: "json",
            success: function (data) {
                $.each(data,function(){
                    console.log(this['category_id']+this['category_name']);
                    $('#modalChooseCategorySelect').append('<option value='+this['category_id']+'>'+this['category_name']+'</option>');
                });
            }
        });
    });



    $(function() {

        //点击添加分类的按钮事件
        $('#addCategoryBtn').click(function () {
            $('#addModal').modal();
        });

        //确定添加分类按钮
        $('#addBtn').click(function () {
            //正则提示写法
            if ($("#addForm").valid()==false){
                alert('填写信息有误,请检查');
                return false;
            }
            var value = $("#modalChooseCategorySelect option:selected").val();
            console.log('$("#modalChooseCategorySelect option:selected").val()'+$("#modalChooseCategorySelect option:selected").val());

            $.ajax({
                type:'post',
                url:'add-second-category',
                data:{pid:value,category_name:$('#category_name_input').val()},
                dataType: "json",
                success: function (data) {
                    console.log('新增成功');
                    $('#table').bootstrapTable('refresh');
                    $('#addModal').modal('hide');
                }
            });
            $("#category_name_input").val('');

        });
    });

</script>